<template>
  <div>
    <form readonly>
      <div v-if="showNodeForm">
        <!--  customize properties -->
        <el-form ref="form" label-width="80px" :disabled="readOnly">
          <el-tabs>
            <el-tab-pane label="基本信息">
              <el-row>
                <el-form-item label="节点编码" :required="true">
                  <el-input
                    v-model="formModel.nodeCode"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="节点名称" :required="true">
                  <el-input
                    v-model="formModel.label"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="判断类型" style="width: 100%">
                  <el-select
                    v-model="formModel.justiceType"
                    @change="changeJusticeType"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in justiceTypeList"
                      :label="item.text"
                      :value="item.id"
                      @click="handleSubmit"
                      >{{ item.text }}</el-option
                    >
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row v-show="formModel.justiceType == 2">
                <el-form-item label="通过类型">
                  <el-select
                    v-model="formModel.passType"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="item in passTypeList"
                      :label="item.text"
                      :value="item.code + ''"
                      @click="handleSubmit"
                      >{{ item.text }}</el-option
                    >
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row v-if="formModel.justiceType == 2">
                <el-form-item label="失败操作">
                  <el-select
                    v-model="formModel.failureOperator"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="item in actionList"
                      :label="item.actionName"
                      :value="item.actionCode"
                      >{{ item.actionName }}</el-option
                    >
                    <el-option
                      v-for="item in edgeActionList"
                      :label="item.actionName"
                      :value="item.actionCode"
                      >{{ item.actionName }}</el-option
                    >
                  </el-select>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item label="审批Url">
                  <el-input
                    v-model="formModel.orderApproveUrl"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="描述" prop="remark" :required="true">
                  <el-input
                    v-model="formModel.remark"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="参数模板">
                  <el-select
                    v-model="formModel.paramTemplateCode"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="item in paramsTemplateList"
                      :label="item.name"
                      :value="item.templateCode"
                      >{{ item.name }}</el-option
                    >
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="节点进入前通知">
                  <el-select
                    v-model="notify.nodeInNotify"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="item in notifyBeforeOptions"
                      :label="item.notifyName"
                      :value="item.notifyCode"
                      >{{ item.notifyName }}</el-option
                    >
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="节点进入通知">
                  <el-select
                    v-model="notify.nodeAfterInNotify"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="item in notifyAfterOptions"
                      :label="item.notifyName"
                      :value="item.notifyCode"
                      >{{ item.notifyName }}</el-option
                    >
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="节点出去通知">
                  <el-select
                    v-model="notify.nodeOutNotify"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="item in notifyOutOptions"
                      :label="item.notifyName"
                      :value="item.notifyCode"
                      >{{ item.notifyName }}</el-option
                    >
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="离开类型">
                  <el-select
                    v-model="formModel.leaveType"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option label="无" :value="1">无</el-option>
                    <el-option label="待唤醒" :value="2">待唤醒</el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-tab-pane>

            <el-tab-pane label="动作">
              <div style="margin-bottom: 10px">
                <el-button type="primary" @click="addAction()">添加</el-button>
              </div>
              <el-row
                v-for="(item, index) in actionList"
                style="padding: 20px 0px"
              >
                <el-form-item label="动作操作">
                  <el-select
                    v-model="item.operateType"
                    @change="handleSubmit"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="(type, index) in actionTypeList"
                      :label="type.text"
                      :value="type.id"
                      v-if="!(formModel.nodeType == 3 && index == 0)"
                      >{{ type.text }}</el-option
                    >
                  </el-select>
                </el-form-item>
                <el-form-item label="动作编码" :required="true">
                  <el-input
                    v-model="item.actionCode"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
                <el-form-item label="动作名称" :required="true">
                  <el-input
                    v-model="item.actionName"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
                <el-form-item label="显示条件">
                  <el-input
                    v-model="item.showCondition"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="自动化条件"
                  v-if="formModel.justiceType != 2"
                >
                  <el-input
                    v-model="item.autoCondition"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
                <el-form-item label="按钮排序">
                  <el-input
                    v-model="item.orderIndex"
                    oninput="value=value.replace(/[^0-9]/g,'')"
                    @blur.prevent="handleSubmit"
                  ></el-input>
                </el-form-item>
                <div style="margin: 10px">
                  <el-button
                    class="pull-right"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="delAction(index)"
                  ></el-button>
                </div>
              </el-row>
            </el-tab-pane>

            <el-tab-pane label="显示规则">
              <div style="margin-bottom: 10px">
                <el-button type="primary" @click="addShowRule()"
                  >添加</el-button
                >
              </div>
              <el-row
                v-for="(rule, index) in showRuleList"
                style="padding-top: 20px; padding-bottom: 20px"
              >
                <el-form-item label="显示策略">
                  <el-select
                    v-model="rule.showStrategy"
                    @change="changeStrategy($event, index)"
                    style="width: 100%"
                  >
                    <el-option value="">--请选择--</el-option>
                    <el-option
                      v-for="item in showTacticsList"
                      :label="item.text"
                      :value="Number(item.id)"
                      v-if="
                        !(tenantCode == -1 && (item.id == 1 || item.id == 3))
                      "
                      >{{ item.text }}</el-option
                    >
                  </el-select>
                </el-form-item>
                <el-form-item label="机构参数" :required="true">
                  <div
                    @click="chooseRole(index, 'agent', rule.showStrategy != 1)"
                  >
                    <ht-input-tag
                      :list="rule.agentName ? rule.agentName : []"
                      :disabled="
                        !rule.showStrategy || rule.showStrategy != 1 || readOnly
                      "
                      :dataType="'agent'"
                      :dataIndex="index"
                      @changeList="changeShowDataList"
                    ></ht-input-tag>
                  </div>
                </el-form-item>
                <el-form-item label="角色参数" :required="true">
                  <div
                    @click="chooseRole(index, 'role', rule.showStrategy == 3)"
                  >
                    <ht-input-tag
                      :list="rule.roleName ? rule.roleName : []"
                      :disabled="
                        !rule.showStrategy || rule.showStrategy == 3 || readOnly
                      "
                      :dataType="'role'"
                      :dataIndex="index"
                      @changeList="changeShowDataList"
                    ></ht-input-tag>
                  </div>
                </el-form-item>
                <el-form-item label="人员参数" :required="true">
                  <div
                    @click="chooseRole(index, 'user', rule.showStrategy != 3)"
                  >
                    <ht-input-tag
                      :list="rule.userName ? rule.userName : []"
                      :disabled="
                        !rule.showStrategy || rule.showStrategy != 3 || readOnly
                      "
                      :dataType="'user'"
                      :dataIndex="index"
                      @changeList="changeShowDataList"
                    ></ht-input-tag>
                  </div>
                </el-form-item>
                <div style="margin: 10px">
                  <el-button
                    class="pull-right"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="delShowRule(index)"
                  ></el-button>
                </div>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <div v-if="showEdgeForm">
        <el-form ref="form" label-width="80px" :disabled="readOnly">
          <el-tabs>
            <el-tab-pane label="动作">
              <div style="margin-bottom: 10px">
                <!--                <el-button type="primary" @click="addAction()">添加</el-button>-->
              </div>
              <el-form-item label="动作编码" :required="true">
                <el-input
                  v-model="formModel.actionCode"
                  @blur.prevent="handleSubmit"
                ></el-input>
              </el-form-item>
              <el-form-item label="动作名称" :required="true">
                <el-input
                  v-model="formModel.actionName"
                  @blur.prevent="handleSubmit"
                ></el-input>
              </el-form-item>
              <el-form-item label="显示条件">
                <el-input
                  v-model="formModel.showCondition"
                  @blur.prevent="handleSubmit"
                ></el-input>
              </el-form-item>
              <el-form-item label="自动化条件" v-if="actionShowAutoCondition">
                <el-input
                  v-model="formModel.autoCondition"
                  @blur.prevent="handleSubmit"
                ></el-input>
              </el-form-item>
              <el-form-item label="按钮排序">
                <el-input
                  v-model="formModel.orderIndex"
                  oninput="value=value.replace(/[^0-9]/g,'')"
                  @blur.prevent="handleSubmit"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </form>
    <ht-select-table
      v-show="showRoleDialogFlag"
      @getChecked="roleCallback"
      :tenantCode="tenantCode"
      ref="roleDialog"
      rowKey="id"
      :netConfig="roleDialogParams.reqConfig"
      :queryOptions="roleDialogParams.formOptions"
      :columns="roleDialogParams.tableBindColumns"
    />
    <ht-select-table
      v-show="showAgentDialogFlag"
      @getChecked="agentCallback"
      :tenantCode="tenantCode"
      ref="agentDialog"
      rowKey="id"
      :netConfig="agentDialogParams.reqConfig"
      :queryOptions="agentDialogParams.formOptions"
      :columns="agentDialogParams.tableBindColumns"
    />
    <ht-select-table
      v-show="showUserDialogFlag"
      @getChecked="userCallback"
      :tenantCode="tenantCode"
      ref="userDialog"
      rowKey="credentialId"
      :netConfig="userDialogParams.reqConfig"
      :queryOptions="userDialogParams.formOptions"
      :columns="userDialogParams.tableBindColumns"
    />
  </div>
</template>

<script>
import localEnum from "@/local_enum";
import { cloneDeep } from "lodash";
import { queryNotifyConfByNotifyTypeVue } from "@/api/apchain_app/notifyConf/notifyConf";
import {
  userListApi,
  agentListApi,
  roleListApi,
  findPassTypeList,
  nodeParamTemplateList,
} from "@/api/apchain_app/flowConf/flowConf";
export default {
  name: "EditorDetailForm",
  inject: ["root"],
  props: ["type", "readOnly"],
  data() {
    return {
      formModel: {},
      tenantCode: "",
      deptCode: "",
      showNodeForm: false,
      showEdgeForm: false,
      maxNodeWidth: 200, // fit long label
      defaultNodeWidth: 80,
      defaultNodeHeight: 48,
      fontSize: 12,
      notifyBeforeOptions: [],
      notifyAfterOptions: [],
      notifyOutOptions: [],
      paramsTemplateList: [],
      passTypeList: [],
      justiceTypeList: [],
      //显示策略
      showTacticsList: [],
      notify: {
        //进入节点之前的通知
        nodeInNotify: "",
        //进入节点之后的通知
        nodeAfterInNotify: "",
        //离开节点之后的通知
        nodeOutNotify: "",
        //任务结束的通知
        taskEndNotify: "",
      },
      // 离开类型
      leaveType: 1,
      actionTypeList: [],
      showRoleDialogFlag: false,
      showAgentDialogFlag: false,
      showUserDialogFlag: false,
      actionList: [],
      // 用于关联的线操作
      edgeActionList: [],
      showRuleList: [
        {
          showStrategy: "",
          agentName: "",
          roleName: "",
          userName: "",
        },
      ],
      //线信息编辑中是否显示自动条件
      actionShowAutoCondition: true,
      userDialogParams: {
        reqConfig: {
          queryUrl: userListApi,
        },
        formOptions: [
          {
            type: "input",
            prop: "name",
            defaultAttr: {
              label: "名称",
              placeholder: "请填写名称",
            },
          },
        ],
        tableBindColumns: [
          {
            label: "ID",
            prop: "credentialId",
          },
          {
            label: "名称",
            prop: "name",
          },
          {
            label: "机构名称",
            prop: "deptName",
          },
          {
            label: "身份类型",
            prop: "credentialType",
            formatter: (row, value, index) => {
              return value == 1 ? "本职" : "委任";
            },
          },
        ],
      },
      agentDialogParams: {
        reqConfig: {
          queryUrl: agentListApi,
        },
        formOptions: [
          {
            type: "input",
            prop: "code",
            defaultAttr: {
              label: "编号",
              placeholder: "请填写编号",
            },
          },
          {
            type: "input",
            prop: "name",
            defaultAttr: {
              label: "名称",
              placeholder: "请填写名称",
            },
          },
        ],
        tableBindColumns: [
          {
            label: "ID",
            prop: "id",
            visible: false,
          },
          {
            label: "编号",
            prop: "code",
          },
          {
            label: "名称",
            prop: "name",
          },
        ],
      },
      roleDialogParams: {
        reqConfig: {
          queryUrl: roleListApi,
        },
        formOptions: [
          {
            type: "input",
            prop: "code",
            defaultAttr: {
              label: "编号",
              placeholder: "请填写编号",
            },
          },
          {
            type: "input",
            prop: "name",
            defaultAttr: {
              label: "名称",
              placeholder: "请填写名称",
            },
          },
        ],
        tableBindColumns: [
          {
            label: "ID",
            prop: "id",
            visible: false,
          },
          {
            label: "编号",
            prop: "code",
          },
          {
            label: "名称",
            prop: "name",
          },
        ],
      },
    };
  },
  mounted() {
    if (sessionStorage.getItem("flowEditCurrentTenantCode")) {
      this.tenantCode =
        sessionStorage.getItem("flowEditCurrentTenantCode") || "";
    }
    if (sessionStorage.getItem("flowEditCurrentDeptCode")) {
      this.deptCode = sessionStorage.getItem("flowEditCurrentDeptCode");
    }
    setTimeout(() => {
      this.actionTypeList = localEnum.actionTypeList;
      this.justiceTypeList = localEnum.justiceTypeList;
      this.showTacticsList = localEnum.showTacticsList;
      const formModel = this.root.propsAPI.getSelected()[0].getModel();
      this.formModel = Object.assign(
        {},
        { shape: "flow-smooth" },
        cloneDeep(formModel) // 防止误编辑
      );

      if (this.type == "edge") {
        if (formModel.nodeType != 2) {
          this.showEdgeForm = true;
        }

        if (!this.formModel.actionCode)
          this.$set(this.formModel, "actionCode", "");
        if (!this.formModel.actionName)
          this.$set(this.formModel, "actionName", "");
        if (!this.formModel.showCondition)
          this.$set(this.formModel, "showCondition", "");
        if (!this.formModel.autoCondition)
          this.$set(this.formModel, "autoCondition", "");
        if (!this.formModel.orderIndex)
          this.$set(this.formModel, "orderIndex", 0);

        this.$set(this.formModel, "operateType", 1);
        // 需要去 来源节点 找到来源节点 获取一个字段进行判断
        if (this.formModel.source) {
          let obj = this.root.propsAPI.save();
          let sourceNode = obj.nodes.find((x) => x.id == this.formModel.source);
          if (sourceNode && sourceNode.justiceType == 2) {
            this.actionShowAutoCondition = false;
          }
        }
      } else {
        if (formModel.nodeType != 2) {
          this.showNodeForm = true;
        }
        if (!this.formModel.leaveType) {
          this.formModel.leaveType = 1;
        }

        // 动作
        if (!this.formModel.actions || this.formModel.actions.length < 1) {
          this.$set(this.formModel, "actions", this.actionList);
        } else {
          this.actionList = this.formModel.actions;
        }

        // 需要去 获取所有连出去的线 因为 连出去的线也是动作
        if (!this.edgeActionList || !this.edgeActionList.length) {
          this.edgeActionList = [];
          let obj = this.root.propsAPI.save();
          let edgeList = obj.edges.filter((x) => x.source == this.formModel.id);
          if (edgeList && edgeList.length) {
            for (let x of edgeList) {
              if (!x.actionName || !x.actionCode) continue;
              this.edgeActionList.push({
                actionName: x.actionName,
                actionCode: x.actionCode,
              });
            }
          }
        }

        // 显示规则
        if (!this.formModel.shows || this.formModel.shows.length < 1) {
          this.$set(this.formModel, "shows", this.showRuleList);
        } else {
          this.showRuleList = this.formModel.shows;
        }

        //如果不存在这个字段则是第一次就挂在这个字段
        if (!this.formModel.notify) {
          this.$set(this.formModel, "notify", this.notify);
        } else {
          this.notify = this.formModel.notify;
        }
        this.noticeData(3);
        this.noticeData(4);
        this.noticeData(5);

        // 设置默认属性
        if (!this.formModel.justiceType) {
          this.$set(this.formModel, "justiceType", 1);
        }
        // 初始化通过类型
        if (!this.formModel.passType) {
          this.$set(this.formModel, "passType", "");
          this.$set(this.formModel, "failureOperator", "");
        }
        // findPassTypeList().then().then(res => {
        //   this.passTypeList = res.result
        // })

        this.getDicts("approvechain_pass_type").then((response) => {
          this.passTypeList = response.result;
        });

        // 加载参数模版
        nodeParamTemplateList(this.deptCode).then((res) => {
          this.paramsTemplateList = res.result;
        });
      }

      //监听提交事件
      //this.$EventBus.$off('flow-submit-handle')
      //this.$EventBus.$on('flow-submit-handle',() => {
      //this.handleSubmit()
      //})
      // setInterval(() => {
      //   this.handleSubmit()
      // },1000)
    }, 10);
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    //this.handleSubmit()
  },
  methods: {
    addAction() {
      this.actionList.push({});
    },
    delAction(index) {
      this.actionList.splice(index, 1);
      this.handleSubmit();
    },
    addShowRule() {
      this.showRuleList.push({});
    },
    // 显示规则切换
    changeStrategy(e, index) {
      let strategy = this.showRuleList[index].showStrategy;
      if (strategy == 1) {
        this.showRuleList[index].userName = [];
        this.showRuleList[index].userParam = "";
      } else if (strategy == 2) {
        this.showRuleList[index].agentName = [];
        this.showRuleList[index].agentParam = "";
        this.showRuleList[index].userName = [];
        this.showRuleList[index].userParam = "";
      } else if (strategy == 3) {
        this.showRuleList[index].agentName = [];
        this.showRuleList[index].agentParam = "";
        this.showRuleList[index].roleName = [];
        this.showRuleList[index].roleParam = "";
      } else if (strategy == 4 || strategy == 5 || strategy == 6) {
        this.showRuleList[index].agentName = [];
        this.showRuleList[index].agentParam = "";
        this.showRuleList[index].userName = [];
        this.showRuleList[index].userParam = "";
      }

      this.handleSubmit();
    },
    delShowRule(index) {
      this.showRuleList.splice(index, 1);
      this.handleSubmit();
    },
    noticeData(notifyType) {
      queryNotifyConfByNotifyTypeVue({
        notifyType: notifyType,
        deptCode: this.deptCode,
      }).then((response) => {
        if (notifyType == 3) {
          this.notifyBeforeOptions = response.result;
        } else if (notifyType == 4) {
          this.notifyAfterOptions = response.result;
        } else if (notifyType == 5) {
          this.notifyOutOptions = response.result;
        }
      });
    },
    //判断类型改变
    changeJusticeType(e) {
      // 当变成多人条件的时候动作里面会移除自动化输入，这时候需要清理
      this.actionList.forEach((item) => {
        item.autoCondition = "";
      });
      this.formModel.passType = "";
      this.formModel.failureOperator = "";
      this.handleSubmit();
    },
    handleSubmit() {
      const { getSelected, executeCommand, update } = this.root.propsAPI;
      const { formModel } = this;
      this.$nextTick(() => {
        const item = getSelected()[0];
        if (!item) return;

        // 自动调整尺寸
        const adjustSize = (model) => {
          if (model.type !== "node" || model.shape !== "flow-rect") {
            return model;
          }
          const canvas = document.createElement("canvas");
          const canvasContext = canvas.getContext("2d");
          canvasContext.font = this.fontSize + "px System";
          const maxWidth = this.maxNodeWidth;
          let label = model.label.replace("\n", "");
          let sourceWidth = this.defaultNodeWidth;
          let sourceHeight = this.defaultNodeHeight;
          const spacing = 10;
          const widthWithSpacing =
            canvasContext.measureText(label).width + spacing;
          model.size = `${sourceWidth}*${sourceHeight}`; // 先恢复默认尺寸

          if (widthWithSpacing <= sourceWidth || sourceWidth >= maxWidth) {
            return model;
          }

          // 自动撑宽
          if (widthWithSpacing <= maxWidth) {
            return {
              ...model,
              size: `${widthWithSpacing}*${sourceHeight}`,
            };
          }

          // 自动折行
          let multilineText = "";
          let multilineCount = 1;
          let multilineTextWidth = 0;

          for (const char of label) {
            const { width } = canvasContext.measureText(char);

            if (multilineTextWidth + width + spacing >= maxWidth) {
              multilineText += "\n";
              multilineTextWidth = 0;
              multilineCount++;
            }

            multilineText += char;
            multilineTextWidth += width;
          }

          return {
            ...model,
            label: multilineText,
            size: `${maxWidth}*${Math.max(
              sourceHeight,
              this.fontSize * multilineCount * 1.2 + spacing
            )}`,
          };
        };

        const newFormModel = adjustSize(formModel);

        executeCommand(() => {
          update(item, newFormModel);
        });

        this.$forceUpdate();
      });
    },
    chooseRole(index, type, noClick) {
      // 如果只读不可以点击
      if (this.readOnly) {
        return;
      }
      if (noClick) return;

      let selectedDataList = [];
      if (type == "role") {
        this.showRoleDialogFlag = true;
        if (
          this.showRuleList[index].roleName &&
          Array.isArray(this.showRuleList[index].roleName)
        ) {
          selectedDataList = this.showRuleList[index].roleName;
        }

        this.$refs.roleDialog.show(this.tenantCode, selectedDataList, {
          index: index,
        });
        // this.$refs.roleDialog.showDialog(index,'选择角色参数',selectedDataList)
      }
      if (type == "agent") {
        this.showAgentDialogFlag = true;
        if (
          this.showRuleList[index].agentName &&
          Array.isArray(this.showRuleList[index].agentName)
        ) {
          selectedDataList = this.showRuleList[index].agentName;
        }
        this.$refs.agentDialog.show(this.tenantCode, selectedDataList, {
          index: index,
        });
        // this.$refs.agentDialog.showDialog(index,'选择机构参数',selectedDataList)
      }
      if (type == "user") {
        this.showUserDialogFlag = true;
        if (
          this.showRuleList[index].userName &&
          Array.isArray(this.showRuleList[index].userName)
        ) {
          selectedDataList = this.showRuleList[index].userName;
        }
        this.$nextTick(() => {
          this.$refs.userDialog.show(this.tenantCode, selectedDataList, {
            index: index,
          });
        });
      }
    },
    userCallback(data, extendParam) {
      this.showUserDialogFlag = false;
      this.showRuleList[extendParam.index].userName = data;
      this.showRuleList[extendParam.index].userParam = JSON.stringify(data);
      this.handleSubmit();
    },
    agentCallback(data, extendParam) {
      this.showAgentDialogFlag = false;
      this.showRuleList[extendParam.index].agentName = data;
      this.showRuleList[extendParam.index].agentParam = JSON.stringify(data);
      this.handleSubmit();
    },
    roleCallback(data, extendParam) {
      this.showRoleDialogFlag = false;
      this.showRuleList[extendParam.index].roleName = data;
      this.showRuleList[extendParam.index].roleParam = JSON.stringify(data);
      this.handleSubmit();
    },
    // 组件中删除元素回传同步过来
    changeShowDataList(dataType, dataIndex, listIndex) {
      if (dataType == "role") {
        this.showRuleList[dataIndex].roleName.splice(listIndex, 1);
        this.showRuleList[dataIndex].roleParam = JSON.stringify(
          this.showRuleList[dataIndex].roleName
        );
      } else if (dataType == "agent") {
        this.showRuleList[dataIndex].agentName.splice(listIndex, 1);
        this.showRuleList[dataIndex].agentParam = JSON.stringify(
          this.showRuleList[dataIndex].agentName
        );
      } else if (dataType == "user") {
        this.showRuleList[dataIndex].userName.splice(listIndex, 1);
        this.showRuleList[dataIndex].userParam = JSON.stringify(
          this.showRuleList[dataIndex].userName
        );
      }
      this.handleSubmit();
    },
  },
};
</script>

<style lang="less">
hr {
  height: 0;
  border: 0;
  border-top: 1px dashed #ccc;
}
.form-item {
  display: flex;
  font-size: 12px;

  label {
    width: 70px;
    margin-right: 10px;
    text-align: right;
  }
  input {
    width: 160px;
  }
  button {
    width: 160px;
    height: 30px;
    margin: 0 auto;
  }
}
</style>
